import { AnyObject } from "antd/es/_util/type";
import "./index.css";
import { memo } from "react";
const ScrollCom = ({
  cardList,
  handleIndex,
  cardIndex,
  children,
}: AnyObject) => {
  return (
    <div className="h-455 bg-bg-black p-3 mb-3 border border-gray-black rounded-2xl">
      <div className="flex gap-x-2">
        {cardList.map((item: unknown, index: number) => {
          return (
            <div onClick={() => handleIndex(index)}>
              <CardCom
                item={item}
                index={index}
                key={index}
                cardIndex={cardIndex}
              />
            </div>
          );
        })}
      </div>
      <div className="mt-3 h396 flex gap-2 flex-wrap overflow-y-auto pb-3 custom-scrollbar">
        {children}
      </div>
    </div>
  );
};
export const CardCom = memo(({ item, index, cardIndex }: AnyObject) => {
  return (
    <div
      className={`rounded-lg border border-gray-black py-2 px-4.5 text-xs  cursor-pointer ${
        index === cardIndex ? " text-deep-black bg-white" : "text-white"
      } `}
    >
      {item}
    </div>
  );
});
export default ScrollCom;
